<template>
  <div class="agv-dashboard">
    <v-chart ref="chartRef" class="chart"></v-chart>
  </div>
</template>

<script setup>
import { onBeforeUnmount, onMounted, ref } from "vue";
import * as echarts from "echarts";

const dash = ref(0);
// 引用DOM元素
const chartRef = ref(null);

// 初始化图表
const option = {
  series: [
    // 圆环
    {
      type: "pie",
      radius: ["60%", "75%"],
      center: ["50%", "50%"],
      data: [{ value: 100, itemStyle: { color: "#d9dff2 " } }],
      itemStyle: {
        borderWidth: 2,
        borderColor: "#d9dff2",
      },
      label: {
        normal: {
          position: "center",
          formatter: "0%",
          textStyle: {
            fontSize: "40",
            color: "#20edf2",
          },
        },
      },
      labelLine: {
        normal: {
          show: false,
        },
      },
    },
    // 外圈线
    {
      type: "pie",
      radius: ["83%", "85%"],
      endAngle: -40,
      data: [{ value: 1, itemStyle: { color: "#20d6dd " } }],
      label: {
        show: false,
      },
    },
    {
      type: "pie",
      radius: ["83%", "85%"],
      startAngle: 270,
      endAngle: 135,
      data: [{ value: 1, itemStyle: { color: "#20d6dd " } }],
      label: {
        show: false,
      },
    },
    {
      type: "pie",
      radius: ["77%", "79%"],
      startAngle: 180,
      endAngle: 90,
      data: [{ value: 1, itemStyle: { color: "#20d6dd " } }],
      label: {
        show: false,
      },
    },
    {
      type: "pie",
      radius: ["77%", "79%"],
      startAngle: 0,
      endAngle: 270,
      data: [{ value: 1, itemStyle: { color: "#20d6dd " } }],
      label: {
        show: false,
      },
    },
    // 内圈
    {
        type:"pie",
        radius:["81%", "88%"],
        startAngle:-269,
        endAngle:-273,
        data:[{value:1,itemStyle:{color:"#0cd3db",borderRadius:50}}],
        label:{
            show:false,
        }
    },
    {
        type:"pie",
        radius:["81%", "88%"],
        startAngle:-89,
        endAngle:-93,
        data:[{value:1,itemStyle:{color:"#0cd3db",borderRadius:50}}],
        label:{
            show:false,
        }
    },
    {
      type: "pie",
      radius: ["71%", "81%"],
      startAngle: 0,
      endAngle: -3,
      itemStyle: {
        color: "black",
      },
      data: [{ value: 1, itemStyle: { color: "black" } }],
      label: {
        show: false,
      },
    },
    {
      type: "pie",
      radius: ["71%", "81%"],
      startAngle: -45,
      endAngle: -48,
      itemStyle: {
        color: "black",
      },
      data: [{ value: 1, itemStyle: { color: "black" } }],
      label: {
        show: false,
      },
    },
    {
      type: "pie",
      radius: ["71%", "81%"],
      startAngle: -90,
      endAngle: -93,
      itemStyle: {
        color: "black",
      },
      data: [{ value: 1, itemStyle: { color: "black" } }],
      label: {
        show: false,
      },
    },
    {
      type: "pie",
      radius: ["71%", "81%"],
      startAngle: -135,
      endAngle: -138,
      itemStyle: {
        color: "black",
      },
      data: [{ value: 1, itemStyle: { color: "black" } }],
      label: {
        show: false,
      },
    },
    {
      type: "pie",
      radius: ["71%", "81%"],
      startAngle: -180,
      endAngle: -183,
      itemStyle: {
        color: "black",
      },
      data: [{ value: 1, itemStyle: { color: "black" } }],
      label: {
        show: false,
      },
    },
    {
      type: "pie",
      radius: ["71%", "81%"],
      startAngle: -225,
      endAngle: -228,
      itemStyle: {
        color: "black",
      },
      data: [{ value: 1, itemStyle: { color: "black" } }],
      label: {
        show: false,
      },
    },
    {
      type: "pie",
      radius: ["71%", "81%"],
      startAngle: -270,
      endAngle: -273,
      itemStyle: {
        color: "black",
      },
      data: [{ value: 1, itemStyle: { color: "black" } }],
      label: {
        show: false,
      },
    },
    {
      type: "pie",
      radius: ["71%", "81%"],
      startAngle: -315,
      endAngle: -318,
      itemStyle: {
        color: "black",
      },
      data: [{ value: 1, itemStyle: { color: "black" } }],
      label: {
        show: false,
      },
    },
  ],
};

// 在组件挂载时初始化图表
onMounted(() => {
  chartRef.value.setOption(option);
});
</script>

<style lang="scss" scoped>
.agv-dashboard {
  position: relative;
  box-sizing: border-box;
  padding-top: 20px;
  width: 100%;
  height: 100%;
}
.chart {
  height: 80%;
  box-sizing: border-box;
  padding-top: -10px;
  top: -40%;
  left: -50%;
}
</style>